<template>
  <div class="main-container">
    <div class="menu-container">
      <el-menu :default-active="$route.path"
               class="el-menu-vertical-demo"
               :router="true"
               background-color="#33414f"
               text-color="#fff"
               active-text-color="#ffd04b"
               :unique-opened="false">
        <template v-for="item in menuData">
          <el-sub-menu v-if="item.children" :index="item.text">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{ item.text }}</span>
            </template>
            <template v-for="child in item.children">
              <el-menu-item :index="`${child.path}?id=${id}`">
                <el-icon>
                  <component :is="child.icon"></component>
                </el-icon>
                <span>{{ child.text }}</span>
              </el-menu-item>
            </template>
          </el-sub-menu>
          <el-menu-item v-else :key="item.text" :index="`${item.path}?id=${id}`">
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.text }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <div class="content-container">
      <router-view></router-view>
    </div>
  </div>
  <el-dialog v-model="dialogFormVisible">
    <template #title>
      <div class="dialog-title">
        <div class="title-text">
          <el-icon>
            <Message />
          </el-icon>
          <el-button @click="SignIn">{{title}}</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { useRoute } from 'vue-router';
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const dialogFormVisible = ref(false)
const route = useRoute();
const id = route.query.id;
const info = ref()
let title = ref('')

onMounted(()=>{
  setInterval(() => {
    getInfo()
  }, 10000);
})

const getInfo = () => {
  const time=new Date();
  axios.get('http://localhost:8080/getInfo1',{
    params:{
      sno:id,
      time:time.toISOString()
    }
  }).then(res=>{
    info.value=res.data
    if (info.value.title==="签到"){
      title=info.value.title
      dialogFormVisible.value=true
    }
  })
}

const SignIn = () => {
  axios.get('http://localhost:8080/signIn',{
    params:{
      sno:id,
      time:new Date().toISOString()
    }
  }).then(res=> {
    if(res.data==='success'){
      dialogFormVisible.value=false
      ElMessage({
        type: 'success',
        message: "签到成功",
      })
    }
    if(res.data==='fail'){
      dialogFormVisible.value=false
      ElMessage({
        type: 'error',
        message: "签到失败",
      })
    }
  })
}
const menuData = [
  {text: '首页', path: '/student/home', icon: 'HomeFilled'},
  {text: '课程', icon: 'Collection', children: [
      {text: '我的课程', path: '/student/course/mycourse', icon: 'Histogram'},
      {text: '我的课表', path: '/student/course/timetable', icon: 'Histogram'},
      {text: '我的成绩', path: '/student/course/myscore', icon: 'Document'},
      {text: '我的出勤率', path: '/student/course/myattend', icon: 'PieChart'},
      {text: '选课', path: '/student/course/secourse', icon: 'Document'},
      {text: '退课', path: '/student/course/drop', icon: 'Document'},
      {text: '历史选课', path: '/student/course/secourse_record', icon: 'Document'},
    ]},
  {text: '收件箱', path: '/student/inbox', icon:'Comment'},
  {text: '评教', path: '/student/rate', icon: 'EditPen'}
];
</script>

<style scoped>
.main-container {
  display: flex;
  min-height: 100vh; /* 确保容器最小高度为视口高度 */
}

.menu-container {
  /* 菜单栏的宽度可以根据需要调整 */
  width: 200px;
  background-color: #33414f; /* 菜单栏背景颜色 */
}

.content-container {
  flex-grow: 1; /* 让内容区域占据剩余的空间 */
  padding: 20px;
  background-color: #fff; /* 内容区域背景颜色 */
}
.dialog-title {
  visibility: visible;
}
</style>